<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Sortable With AJAX &amp; MYSQL</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />
<script type="text/javascript">
	// When the document is ready set up our sortable with it's inherant function(s)
	$(document).ready(function() {
		$("#test-list").sortable({
			handle : '.handle',
			axis : 'y',
			update : function() {
				var order = $('#test-list').sortable('serialize');
				alert(order);
				$("#info").load("process-sortable.php?" + order);
			},
			stop : function(event, ui) {
				sortElementWhenStopDrag();
			}
		});
		// Event sort element when stop sortable
		function sortElementWhenStopDrag() {
			var listTest = document.getElementById('test-list');
			var position = 1;
			for ( var i = 0; i < listTest.children.length; i++) {
				var li = listTest.children[i];
				// Content of br tag
				li.children[0].innerHTML = position;
				position++;
			}

		}
	});
</script>
</head>

<body>
	<pre>
<div id="info">Waiting for update</div>
</pre>
	<ul id="test-list">
		<li id="listItem_1"><b>1</b>&#160;&#160;&#160;<img
			src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item
				1 </strong>with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a></li>
		<li id="listItem_2"><b>2</b>&#160;&#160;&#160;<img
			src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item
				2</strong></li>
		<li id="listItem_3"><b>3</b>&#160;&#160;&#160;<img
			src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item
				3</strong></li>
		<li id="listItem_4"><b>4</b>&#160;&#160;&#160;<img
			src="arrow.png" alt="move" width="16" height="16" class="handle" /><strong>Item
				4</strong></li>

	</ul>
</body>
</html>